<template>
	<view class="ssecurity">
		<view class="ssecurity_head">
			<view class="back" @click="navigateBack()">
			</view>
		</view>
		<view class="ssecurity-warp">
			<view class="list" v-for="(item,i) in list">
				<view class="list_item">
					<view class="item_top">
						<image class="leftIcon" :src="item.leftIcon" mode="aspectFit" ></image>
						<text class="title">{{item.title}}</text>
						<image class="rightIcon" :src="item.rightIcon" mode="aspectFit" :style="{bottom:i%2?'-10px':'-20px'}"></image>
					</view>
					<view class="item_content">
						{{item.content}}
						<button class="search_btn" v-if="i==2||i==3" @click="queryCkick(i)">立即查看</button>
					</view>
				</view>
			</view>
		</view>
		<view class="mypopup" v-show="show">
			<view class="mypopup-inner">
				<view class="title">哈尔滨甜夜网络科技有限公司</view>
				<view class="inner_list">
					<view class="inner_list_item" v-for="item in arr">
						<view class="subtitle">
							{{item.title}}
						</view>
						<image class="imgs" :src="item.img" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="close" @click="show=false"></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			list: [
				{ 
					title: '找回包赔并且赔付精神损失费', 
					leftIcon:'../../static/ssecurity/list_1@2x.png',
					rightIcon:'../../static/ssecurity/right_icon1@2x.png',
					content:'淘气游为解决找回后浪费充值金额、自己时间精力等问题， 在大部分游戏普通包赔基础上额外赔付30%'
				},
				{
					title: '专业的售后团队', 
					leftIcon:'../../static/ssecurity/list_2@2x.png',
					rightIcon:'../../static/ssecurity/right_icon2@2x.png',
					content:'淘气游拥有线上售后部，线上法务部，线下追溯组，为您的账号保驾护航'
				},
				{
					title: '正规公司手续齐全', 
					leftIcon:'../../static/ssecurity/list_3@2x.png',
					rightIcon:'../../static/ssecurity/right_icon3@2x.png',
					content:'淘气游平台为哈尔滨甜夜网络科技有限公司旗下的账号交易 App，是正规工商注册企业，拥有增值电信经营许可，软件 著作权，商标等资质'
				},
				{
					title: '超多知名明星主播担保', 
					leftIcon:'../../static/ssecurity/list_4@2x.png',
					rightIcon:'../../static/ssecurity/right_icon4@2x.png',
					content:'淘气游App长期与抖音、快手、虎牙、斗鱼等平台超多主播 长期合作。点击查看平台合作主播'
				}
			],
			arr: [
				{
					title: '营业执照',
					img:'../../static/ssecurity/yyzj.jpg'
				},
				{
					title: '商标',
					img:'../../static/ssecurity/sb.jpg'
				},
				{
					title: '增值电信经营许可证',
					img:'../../static/ssecurity/zz.jpg'
				},
				{
					title: '软件著作权登记证书',
					img:'../../static/ssecurity/rz.jpg'
				}
			]
		};
	},
	methods: {
		queryCkick(i) {
			console.log(i)
			if(i==2) {
				this.show = true
			}
			if(i==3){
				this.navigateTo('coAnchor')
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	.ssecurity {
		.ssecurity_head {
			height: 328rpx;
			background: url(~@/static/ssecurity/bg_ssu@2x.png) no-repeat;
			background-size: 100%;
			.back {
				position: absolute;
				top: 100rpx;
				left: 50rpx;
				height: 30px;
				width: 30px;
				background: url(~@/static/account/icon_back@2x.png) no-repeat;
				background-size: 100%;
			}
		}
		.ssecurity-warp {
			background: #FFFFFF;
			position: relative;
			&::after {
				content: "";
				position: absolute;
				top: -40rpx;
				left: 0;
				right: 0;
				width: 100%;
				height: 40rpx;
				background-color: #FFFFFF;
				border-radius: 40rpx 40rpx 0px 0px;
			}
			.list {
				margin: 0 35rpx;
				.list_item {
					margin-bottom: 25rpx;
					
					.item_top {
						display: flex;
						justify-content: flex-start;
						background: url(~@/static/ssecurity/list_bg@2x.png) no-repeat;
						background-size: 100%;
						position: relative;
						.leftIcon {
							display: inline-block;
							margin-left: 15rpx;
							margin-top: 15rpx;
							margin-right: 15rpx;
							width: 80rpx;
							height: 80rpx;
						}
						.rightIcon {
							position: absolute;
							right: 0;
							width: 157rpx;
							height: 157rpx;
						}
						
						.title {
							width: 100%;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #22150B;
							line-height: 100rpx;
							background: url(~@/static/ssecurity/hghit@2x.png) no-repeat left;
							background-size: 20%;
						}
					}
					.item_content {
						background: #FFFAE3;
						border-radius: 0rpx 0rpx 60rpx 60rpx ;
						padding: 35rpx;
						ont-weight: 500;
						font-size: 24rpx;
						color: #6C6C6C;
						line-height: 28rpx;
						.search_btn {
							width: 340rpx;
							height: 96rpx;
							margin-top: 25rpx;
							background: url(~@/static/ssecurity/button_2go@2x.png) no-repeat;
							background-size: 100%;
						}
						uni-button:after {
							border: none;
						}
					}
				}
			}
			
		}
		.mypopup {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background: rgba(0,0,0,0.4);
			z-index: 10;
			.mypopup-inner {
				height: 80vh;
				margin: 64rpx 0rpx 40rpx 40rpx;
				background: url(~@/static/ssecurity/dialogImg@2x.png) no-repeat;
				background-size: 100%;
				padding: 35rpx;
				overflow: hidden;
				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 32rpx;
					line-height: 98rpx;
					text-align: left;
					color: #A6763E;
					text-indent: 75rpx;
					background: linear-gradient(to bottom, #FFE6C9, #A6763E);
					-webkit-background-clip: text;
					background-clip: text;
					-webkit-text-fill-color: transparent;
					text-fill-color: transparent;
					mix-blend-mode: initial;
				}
				.inner_list {
					width: 95%;
					display: flex;
					flex-wrap: wrap;
					.inner_list_item {
						width: 50%;
						margin: 25rpx 0 25rpx 0;
						.subtitle {
							font-weight: 800;
							font-size: 28rpx;
							color: #FFFFFF;
							line-height: 63rpx;
							padding-left: 35rpx;
							margin-bottom: 25rpx;
							height: 56rpx;
							width: 50%;
							white-space: nowrap;
							background: linear-gradient( 90deg, #E3B867 0%, rgba(217,217,217,0) 100%);
							border-radius: 90rpx 90rpx 90rpx 90rpx;
						}
						.imgs {
							width: 90%;
							height: 280rpx;
						}
					}
				}
			}
		}
		.close {
			margin: 0 auto;
			width: 68rpx;
			height: 68rpx;
			background: url(~@/static/ssecurity/dialogClose@2x.png) no-repeat;
			background-size: 100%;
		}
	}
	
</style>